{% load custom_markdown %}
{% load bootstrap_pagination %}
<div style="margin-top:60px;">
  {% if comments %}
  已有 <b>{{ total }}</b> 条评论
  <!-- 遍历树形结构 -->
  {% for comment in comments %}
    <div class="col-12">
      <hr>
      <a id="{{ comment.anchor|default_if_none:'' }}" class="comments_anchor">
        <!-- <img src="{{ comment.user.avatar }}" style="border:1px solid #eee; border-radius:50%; padding: 5px;"> -->
        <img src="/static/images/avatar.png" style="border:1px solid #eee; border-radius:50%; padding: 5px; width: 40px; height: 40px;">
        <span>
          <strong style="margin-right:5px; font-size:15px;">
            <a href="{{ comment.user.website|default_if_none:'#' }}" target="_blank" style="color:#1abc9c;">
              {{ comment.user.nickname }}
            </a>
            {% if comment.user.blogger %}
              <span style="background-color:red;color:#FFF;font-size:smaller;padding:2px 5px;border-radius:5px;">博主</span>
            {% endif %}
          </strong>
          <i style="color:#ccc; font-size: small;">
            {{ comment.created_time|date:"Y-m-d H:i" }}
          </i>
        </span>
      </a>
      <div class="pull-right" style="margin-top: 15px;">
        <a href="#comment_form" style="font-size: small;" class="text-muted" onclick="set_parent_comment_id('{{ comment.id }}', '{{ comment.user.nickname }}')">
          回复
        </a>
      </div>
      <div class="clearfix"></div>
      {% if comment.reply_to %}
      <blockquote>
        <p>引用自 <a href="#{{ comment.parent.anchor }}">@{{ comment.reply_to.nickname }}</a> 的评论</p>
        <div class="quote-content needEmojiParse">{{ comment.parent.content|markdown_to_html }}</div>
      </blockquote>
      {% endif %}
      <div style="margin-top:15px;" class="needEmojiParse">
        {{ comment.content|markdown_to_html }}
      </div>
    </div>
  {% endfor %}
  <hr>
  <div class="paginate" style="margin-top:20px;">
    {% bootstrap_paginate comments url_extra_args=params range=5 show_first_last="true" %}
  </div>
  {% else %}
    <p style="color:gray;text-align:center;">还没有评论，快来抢🛋吧！~</p>
  {% endif %}
</div>
